<template>
	<view class="container">
		<!-- 顶部Tab导航 -->
		<view class="tab-navigation">
			<view class="tab-item" :class="{ active: activeTab === 'year' }" @click="switchTab('year')">
				<text class="tab-text">年级报告</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'class' }" @click="switchTab('class')">
				<text class="tab-text">班级报告</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'student' }" @click="switchTab('student')">
				<text class="tab-text">学生成绩</text>
			</view>
			<view class="share-btn">📤</view>
		</view>

		<!-- 科目选择器 -->
		<SubjectSelector 
			:selectedSubject="selectedSubject" 
			:subjects="subjects"
			@subject-change="handleSubjectChange"
		/>

		<!-- 年级报告内容 -->
		<view class="content" v-if="activeTab === 'year'">
			<!-- 考试概况 -->
			<ExamOverview :overviewData="overviewData" />

			<!-- 均分对比 -->
			<ScoreComparison :comparisonData="classComparisonData" />

			<!-- 四率对比 -->
			<RateComparison :chartData="chartData" :rateData="rateData" />

			<!-- 等级对比 -->
			<GradeComparison :gradeComparisonData="gradeComparisonData" />
		</view>

		<!-- 班级报告内容 -->
		<view class="content" v-if="activeTab === 'class'">
			<!-- 班级选择器 -->
			<ClassSelector 
				:selectedClass="selectedClass" 
				:classList="classList"
				@class-change="handleClassChange"
			/>

			<!-- 考试概况 -->
			<ExamOverview :overviewData="overviewData" />

			<!-- 科目成绩 -->
			<SubjectScores 
				:selectedSubject="selectedSubject"
				:subjectScoresData="subjectScoresData" 
				:studentCategoriesData="studentCategoriesData"
			/>

			<!-- 四率对比 -->
			<RateComparison 
				:chartData="chartData" 
				:rateData="rateData" 
				:showViewButton="true"
				@view-list="showRateList"
			/>

			<!-- 等级对比 -->
			<GradeComparison 
				:gradeComparisonData="gradeComparisonData" 
				:showViewButton="true"
				@view-list="showGradeList"
			/>

			<!-- 偏科名单（仅全科时显示） -->
			<BiasedStudents v-if="selectedSubject === '全科'" :biasedStudentsData="biasedStudentsData" />
			
			<!-- 知识点掌握情况（具体学科时显示） -->
			<KnowledgePoints v-if="selectedSubject !== '全科'" :knowledgeData="knowledgeData" />
		</view>

		<!-- 学生成绩内容 -->
		<view class="content" v-if="activeTab === 'student'">
			<!-- 班级选择器 -->
			<ClassSelector 
				:selectedClass="selectedClass" 
				:classList="classList"
				@class-change="handleClassChange"
			/>

			<!-- 学生成绩情况 -->
			<StudentGrades 
				:selectedSubject="selectedSubject"
				:studentGradesData="studentGradesData"
				@view-grades="handleViewGrades"
				@view-report="handleViewReport"
				@view-answer-sheet="handleViewAnswerSheet"
			/>
		</view>

		<!-- 学生名单弹窗 -->
		<StudentListModal
			:visible="showStudentModal"
			:tabs="modalTabs"
			:studentData="modalStudentData"
			@close="closeStudentModal"
			@tab-change="handleModalTabChange"
		/>

		<!-- 成绩单弹窗 -->
		<GradeReportModal
			:visible="showGradeReportModal"
			:studentInfo="currentStudentInfo"
			:gradeData="currentGradeData"
			@close="closeGradeReportModal"
			@view-answers="handleViewAnswers"
		/>
	</view>
</template>

<script>
import SubjectSelector from '@/components/SubjectSelector.vue';
import ClassSelector from '@/components/ClassSelector.vue';
import ExamOverview from '@/components/ExamOverview.vue';
import ScoreComparison from '@/components/ScoreComparison.vue';
import RateComparison from '@/components/RateComparison.vue';
import GradeComparison from '@/components/GradeComparison.vue';
import SubjectScores from '@/components/SubjectScores.vue';
import BiasedStudents from '@/components/BiasedStudents.vue';
import KnowledgePoints from '@/components/KnowledgePoints.vue';
import StudentListModal from '@/components/StudentListModal.vue';
import StudentGrades from '@/components/StudentGrades.vue';
import GradeReportModal from '@/components/GradeReportModal.vue';

export default {
	components: {
		SubjectSelector,
		ClassSelector,
		ExamOverview,
		ScoreComparison,
		RateComparison,
		GradeComparison,
		SubjectScores,
		BiasedStudents,
		KnowledgePoints,
		StudentListModal,
		StudentGrades,
		GradeReportModal
	},
	data() {
		return {
			activeTab: 'year',
			selectedSubject: '全科',
			selectedClass: '2201班',
			// 弹窗相关状态
			showStudentModal: false,
			modalTitle: '',
			modalTabs: [],
			modalStudentData: {},
			// 成绩单弹窗状态
			showGradeReportModal: false,
			currentStudentInfo: {},
			currentGradeData: [],
			subjects: [
				{ id: 1, name: '全科', icon: '🔲', color: 'cyan' },
				{ id: 2, name: '语文', icon: '📖', color: 'orange' },
				{ id: 3, name: '英文', icon: '📚', color: 'yellow' },
				{ id: 4, name: '数学', icon: '🔢', color: 'purple' },
				{ id: 5, name: '政治', icon: '⭐', color: 'red' },
				{ id: 6, name: '地理', icon: '🌍', color: 'blue' },
				{ id: 7, name: '历史', icon: '🏛️', color: 'brown' },
				{ id: 8, name: '化学', icon: '⚡', color: 'light-blue' },
				{ id: 9, name: '物理', icon: '🧪', color: 'teal' },
				{ id: 10, name: '生物', icon: '🧬', color: 'green' }
			],
			// 班级列表数据
			classList: [
				{ id: 1, name: '2201班' },
				{ id: 2, name: '2202班' },
				{ id: 3, name: '2203班' },
				{ id: 4, name: '2204班' },
				{ id: 5, name: '2205班' }
			],
			// 考试概况数据
			overviewData: {
				examCount: 50,
				averageScore: 400,
				classCount: 20,
				highestScore: 528
			},
			// 均分对比数据
			classComparisonData: [
				{ class: '2208班', highest: '146.7', average: '500', max: '500', min: '39' },
				{ class: '2201班', highest: '15.3', average: '500', max: '500', min: '39' },
				{ class: '2208班', highest: '146.7', average: '500', max: '500', min: '39' },
				{ class: '2201班', highest: '15.3', average: '500', max: '500', min: '39' },
				{ class: '2208班', highest: '146.7', average: '500', max: '500', min: '39' }
			],
			// 四率对比数据
			chartData: {
				percentage: '33.14%',
				label: '优秀'
			},
			rateData: [
				{ type: 'excellent', text: '优秀 [500-400] 人数 138', percentage: '占比 33.12%', color: 'blue' },
				{ type: 'good', text: '良好 [300-400] 人数 158', percentage: '占比 33.12%', color: 'teal' },
				{ type: 'pass', text: '及格 [200-300] 人数 618', percentage: '占比 33.12%', color: 'orange' },
				{ type: 'low', text: '低分 [0-200] 人数 2', percentage: '占比 33.12%', color: 'gray' }
			],
			// 等级对比数据
			gradeComparisonData: [
				{ class: '2208班', actualCount: '50', passCount: '10', passRate: '5%' },
				{ class: '2208班', actualCount: '10', passCount: '50', passRate: '5%' },
				{ class: '2208班', actualCount: '50', passCount: '10', passRate: '5%' },
				{ class: '2208班', actualCount: '10', passCount: '50', passRate: '5%' },
				{ class: '2208班', actualCount: '50', passCount: '10', passRate: '5%' }
			],
			// 科目成绩数据
			subjectScoresData: [
				{ name: '语文', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 },
				{ name: '数学', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 },
				{ name: '历史', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 },
				{ name: '政治', classAverage: '500', gradeAverage: '500', ranking: '39', rating: 0 }
			],
			// 学生分类数据（具体学科模式下使用）
			studentCategoriesData: {
				improved: ['孙悟空', '六小龄童', '唐僧', '沙和尚', '红孩儿'],
				declined: ['六小龄童', '沙和尚', '红孩儿', '孙悟空', '唐僧'],
				top5: ['红孩儿', '唐僧', '六小龄童', '孙悟空', '沙和尚'],
				bottom5: ['孙悟空', '沙和尚', '唐僧', '红孩儿', '六小龄童']
			},
			// 偏科名单数据
			biasedStudentsData: [
				{
					id: 1,
					name: '孙悟空',
					avatar: '孙',
					scores: [
						{ subject: '语文', value: '46.7', type: 'low' },
						{ subject: '数学', value: '146.7', type: 'high' },
						{ subject: '政治', value: '46.7', type: 'low' }
					]
				},
				{
					id: 2,
					name: '孙悟空',
					avatar: '孙',
					scores: [
						{ subject: '语文', value: '46.7', type: 'low' },
						{ subject: '数学', value: '146.7', type: 'high' },
						{ subject: '政治', value: '46.7', type: 'low' }
					]
				},
				{
					id: 3,
					name: '孙悟空',
					avatar: '孙',
					scores: [
						{ subject: '语文', value: '46.7', type: 'low' },
						{ subject: '数学', value: '146.7', type: 'high' },
						{ subject: '政治', value: '46.7', type: 'low' }
					]
				}
			],
			// 知识点掌握情况数据
			knowledgeData: {
				good: 20,
				average: 50,
				poor: 400,
				points: [
					{
						name: '补全对话',
						gradeRate: '46%',
						classRate: '67%',
						questions: '28、29'
					},
					{
						name: '不定代词',
						gradeRate: '46%',
						classRate: '67%',
						questions: '28、29'
					}
				]
			},
			// 学生成绩数据
			studentGradesData: [
				{ 
					id: 1, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 2, 
					name: '林允儿', 
					avatar: '林',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 3, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 4, 
					name: '迪力热巴', 
					avatar: '迪',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 5, 
					name: '刘涛', 
					avatar: '刘',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 6, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 7, 
					name: '林允儿', 
					avatar: '林',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 8, 
					name: '王凯', 
					avatar: '王',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 9, 
					name: '迪力热巴', 
					avatar: '迪',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				},
				{ 
					id: 10, 
					name: '刘涛', 
					avatar: '刘',
					score: '400', 
					gradeRank: '5', 
					classRank: '1' 
				}
			]
		}
	},
	onLoad(options) {
		// 接收传递的参数
		if (options.subject) {
			this.selectedSubject = decodeURIComponent(options.subject);
		}
		if (options.tab) {
			this.activeTab = decodeURIComponent(options.tab);
		}
		console.log('成绩查询页面参数:', options);
	},
	methods: {
		switchTab(tab) {
			this.activeTab = tab;
		},
		handleSubjectChange(subject) {
			console.log('科目切换:', subject);
			this.selectedSubject = subject.name;
			// 这里可以根据选中的科目重新加载数据
		},
		handleClassChange(classItem) {
			console.log('班级切换:', classItem);
			this.selectedClass = classItem.name;
			// 这里可以根据选中的班级重新加载数据
		},
		// 显示四率对比名单
		showRateList() {
			this.modalTabs = [
				{ key: 'excellent', label: '优秀', count: 9 },
				{ key: 'good', label: '良好', count: 23 },
				{ key: 'pass', label: '及格', count: 12 },
				{ key: 'low', label: '低分', count: 3 }
			];
			this.modalStudentData = {
				excellent: [
					{ id: 1, name: '汪小敏', avatar: '汪' },
					{ id: 2, name: '安可列', avatar: '安' },
					{ id: 3, name: '黄安', avatar: '黄' },
					{ id: 4, name: '刘鹤', avatar: '刘' },
					{ id: 5, name: '陈程', avatar: '陈' },
					{ id: 6, name: '蓝菲琳', avatar: '蓝' },
					{ id: 7, name: '林子涵', avatar: '林' },
					{ id: 8, name: '胡一菲', avatar: '胡' },
					{ id: 9, name: '彭瑾', avatar: '彭' }
				],
				good: [
					{ id: 10, name: '罗智文', avatar: '罗' },
					{ id: 11, name: '许珂玥', avatar: '许' },
					{ id: 12, name: '林允儿', avatar: '林' }
				],
				pass: [
					{ id: 13, name: '陈辉', avatar: '陈' },
					{ id: 14, name: '叶倩', avatar: '叶' }
				],
				low: [
					{ id: 15, name: '刘相遇', avatar: '刘' }
				]
			};
			this.showStudentModal = true;
		},
		// 显示等级对比名单
		showGradeList() {
			this.modalTabs = [
				{ key: 'a', label: 'A', count: 90 },
				{ key: 'b', label: 'B', count: 110 },
				{ key: 'c', label: 'C', count: 80 },
				{ key: 'd', label: 'D', count: 110 },
				{ key: 'e', label: 'E', count: 80 }
			];
			this.modalStudentData = {
				a: [
					{ id: 1, name: '汪小敏', avatar: '汪' },
					{ id: 2, name: '安可列', avatar: '安' }
				],
				b: [
					{ id: 3, name: '黄安', avatar: '黄' },
					{ id: 4, name: '刘鹤', avatar: '刘' }
				],
				c: [
					{ id: 5, name: '陈程', avatar: '陈' },
					{ id: 6, name: '蓝菲琳', avatar: '蓝' }
				],
				d: [
					{ id: 7, name: '林子涵', avatar: '林' },
					{ id: 8, name: '胡一菲', avatar: '胡' }
				],
				e: [
					{ id: 9, name: '彭瑾', avatar: '彭' },
					{ id: 10, name: '罗智文', avatar: '罗' }
				]
			};
			this.showStudentModal = true;
		},
		// 关闭弹窗
		closeStudentModal() {
			this.showStudentModal = false;
		},
		// Tab切换
		handleModalTabChange(tabKey) {
			console.log('Modal Tab切换:', tabKey);
		},
		// 查看学生过往成绩
		handleViewGrades(student) {
			console.log('查看过往成绩:', student.name);
			// 跳转到过往成绩页面
			uni.navigateTo({
				url: `/pages/past-grades/past-grades?student=${encodeURIComponent(student.name)}&id=${student.id}`,
				success: (res) => {
					console.log('跳转过往成绩页面成功:', res);
				},
				fail: (err) => {
					console.error('跳转过往成绩页面失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		},
		// 查看学生成绩单
		handleViewReport(student) {
			console.log('查看成绩单:', student.name);
			
			// 设置当前学生信息
			this.currentStudentInfo = {
				name: student.name,
				id: student.id
			};
			
			// 设置成绩数据
			this.currentGradeData = [
				{ subject: '英语', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '语文', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '数学', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '历史', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '化学', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '政治', score: '400', gradeRank: '5', classRank: '1' },
				{ subject: '生物', score: '400', gradeRank: '5', classRank: '1' }
			];
			
			// 显示成绩单弹窗
			this.showGradeReportModal = true;
		},
		// 关闭成绩单弹窗
		closeGradeReportModal() {
			this.showGradeReportModal = false;
		},
		// 查看答题卡
		handleViewAnswers(grade) {
			console.log('查看答题卡:', grade.subject);
			// 跳转到答题卡页面
			uni.navigateTo({
				url: `/pages/answer-sheet/answer-sheet?subject=${encodeURIComponent(grade.subject)}&student=${encodeURIComponent(this.currentStudentInfo.name || '王凯')}`
			});
		},
		// 从学生成绩列表查看答题卡
		handleViewAnswerSheet(student) {
			console.log('查看学生答题卡:', student.name, this.selectedSubject);
			const url = `/pages/answer-sheet/answer-sheet?subject=${encodeURIComponent(this.selectedSubject)}&student=${encodeURIComponent(student.name)}`;
			console.log('跳转URL:', url);
			
			// 跳转到答题卡页面
			uni.navigateTo({
				url: url,
				success: (res) => {
					console.log('跳转成功:', res);
				},
				fail: (err) => {
					console.error('跳转失败:', err);
					uni.showToast({
						title: '页面跳转失败',
						icon: 'none'
					});
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;
@border-color: #f0f0f0;

.container {
	min-height: 100vh;
	background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
	padding: 20rpx;
}

// 顶部Tab导航
.tab-navigation {
	display: flex;
	background: @white;
	border-radius: 16rpx;
	padding: 8rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.tab-item {
		flex: 1;
		padding: 16rpx;
		text-align: center;
		border-radius: 12rpx;
		transition: all 0.3s;

		&.active {
			background: @primary-color;

			.tab-text {
				color: @white;
				font-weight: bold;
			}
		}

		.tab-text {
			font-size: 26rpx;
			color: @text-light;
		}
	}

	.share-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: @text-light;
	}
}

// 科目选择器样式已移至SubjectSelector组件中

// 内容区域
.content {
	width: 100%;
}

// 各模块样式已移至对应子组件中

// 占位内容
.placeholder-content {
	background: @white;
	border-radius: 16rpx;
	padding: 80rpx;
	text-align: center;
	box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.08);

	.placeholder-text {
		font-size: 28rpx;
		color: @text-lighter;
	}
}
</style>
